<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  广告轮播  -->
    <div class="yingmoo-picture" v-for="n in banner">
        <img :src="n.imgpath" />
    </div>
    <div class="model-heighspeed">
      <div class="model-left">
<!--  首都放射线  -->
        <div class="yingmoo-leftcolumn">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">首都放射线</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
            <p class="column-citys">
              <span>更多>></span>
            </p>
          </div>
          <div class="column-content">
          	<ul>
          		<li class="media-model" style="float: left; margin: 8px" v-for="n in list1">
		            <dl>
		              <dt @mouseenter="shos=n" @mouseleave="shos=0">
		                <img width="222px" height="198px" :src="n.imgpath" />
		              </dt> 
		              <dt class="zz" @mouseenter="shos=n" @mouseleave="shos=0" v-show='shos==n'>
		                <div class="black">
		                  <div class="white">
		                    <div class="orange">
		                      <p>{{n.name}}</p>
		                    </div>
		                  </div>
		                  <p>{{n.remark}}</p>
		                </div>
		              </dt>
		              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		              <dd class="media-text-secend">￥{{n.price}}</dd>
		            </dl>
          		</li>
          	</ul>
          </div>
        </div>
<!--  南北纵向线  -->
        <div class="yingmoo-leftcolumn">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">南北纵向线</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
            <p class="column-citys">
              <span>更多>></span>
            </p>
          </div>
          <div class="column-content">
          	<ul>
          		<li class="media-model" style="float: left; margin: 8px" v-for="n in list2">
		            <dl>
		              <dt @mouseenter="shom=n" @mouseleave="shom=0">
		                <img width="222px" height="198px" :src="n.imgpath" />
		              </dt>
		              <dt class="zz" @mouseenter="shom=n" @mouseleave="shom=0" v-show='shom==n'>
		                <div class="black">
		                  <div class="white">
		                    <div class="orange">
		                      <p>{{n.name}}</p>
		                    </div>
		                  </div>
		                  <p>{{n.remark}}</p>
		                </div>
		              </dt>
		              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		              <dd class="media-text-secend">￥{{n.price}}</dd>
		            </dl>
		        </li>    	
		    </ul>    
          </div>
        </div>
<!--  东西横向线  -->
        <div class="yingmoo-leftcolumn">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">东西横向线</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
            <p class="column-citys">
              <span>更多>></span>
            </p>
          </div>
          <div class="column-content">
          	<ul>
          		<li class="media-model" style="float: left; margin: 8px" v-for="n in list3">
		            <dl>
		              <dt @mouseenter="shov=n" @mouseleave="shov=0">
		                <img width="222px" height="198px" :src="n.imgpath" />
		              </dt>
		              <dt class="zz" @mouseenter="shov=n" @mouseleave="shov=0" v-show='shov==n'>
		                <div class="black">
		                  <div class="white">
		                    <div class="orange">
		                      <p>{{n.name}}</p>
		                    </div>
		                  </div>
		                  <p>{{n.remark}}</p>
		                </div>
		              </dt>
		              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		              <dd class="media-text-secend">￥{{n.price}}</dd>
		            </dl>	
          		</li>
          	</ul>
          </div>
        </div>
<!--  地区环线  -->
        <div class="yingmoo-leftcolumn">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">地区环线</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
            <p class="column-citys">
              <span>更多>></span>
            </p>
          </div>
          <div class="column-content">
          	<ul>
          		<li class="media-model" style="float: left; margin: 8px" v-for="n in list4">
		            <dl>
		              <dt @mouseenter="shox=n" @mouseleave="shox=0">
		                <img width="222px" height="198px" :src="n.imgpath" />
		              </dt>
		              <dt class="zz" @mouseenter="shox=n" @mouseleave="shox=0" v-show='shox==n'>
		                <div class="black">
		                  <div class="white">
		                    <div class="orange">
		                      <p>{{n.name}}</p>
		                    </div>
		                  </div>
		                  <p>{{n.remark}}</p>
		                </div>
		              </dt>
		              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		              <dd class="media-text-secend">￥{{n.price}}</dd>
		            </dl>          			
          		</li>
          	</ul>
          </div>
        </div>
<!--  城市环线  -->
        <div class="yingmoo-leftcolumn">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">城市环线</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
            <p class="column-citys">
              <span>更多>></span>
            </p>
          </div>
          <div class="column-content">
          	<ul>
          		<li class="media-model" style="float: left; margin: 8px" v-for="n in list5">
		            <dl>
		              <dt @mouseenter="shoa=n" @mouseleave="shoa=0">
		                <img width="222px" height="198px" :src="n.imgpath" />
		              </dt>
		              <dt class="zz" @mouseenter="shoa=n" @mouseleave="shoa=0" v-show='shoa==n'>
		                <div class="black">
		                  <div class="white">
		                    <div class="orange">
		                      <p>{{n.name}}</p>
		                    </div>
		                  </div>
		                  <p>{{n.remark}}</p>
		                </div>
		              </dt>
		              <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		              <dd class="media-text-secend">￥{{n.price}}</dd>
		            </dl>
          		</li>
          	</ul>
          </div>
        </div>
      </div>
      <div class="model-right">
        <div class="hot-media">
          <p>热门媒体</p>
        </div>
        <dl class="media-right" v-for="n in list6">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-secend">￥{{n.price}}</dd>
          <dd class="media-where">{{n.remark}}</dd>
        </dl>
        <div class="hot-medias">
          <p>高速媒体推荐</p>
        </div>
        <dl class="media-right" v-for="n in list7">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-secend">￥{{n.price}}</dd>
          <dd class="media-where">{{n.remark}}</dd>
        </dl>
        <div class="model-right-text">
          <p v-for="n in list8" :title="n.name">
          	<a href="#">{{n.name}}</a>
          </p>
        </div>
        <img src="../assets/ym-media/media-right.png" />
        <div class="hot-medias">
          <p>高速户外广告公司推荐</p>
        </div>
        <div class="model-right-text">
          <p class="text-header" v-for="n in list9" :title="n.name">
          	<a href="#">{{n.name}}</a>
          </p>
        </div>
        <img src="../assets/ym-media/media-right-last.png" />
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>

<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymSecondnav from "@/components/ymSecondnav.vue";
  export default {
    name: "yingmoo-media",
    components: {
      ymHeader,
      ymMedianav,
      ymSecondnav,
      ymFooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据 */
        banners: [{
          imgUrl: require('@/assets/ym-media/lunbo-highspeed.png')
        }, {
          imgUrl: require('@/assets/ym-media/lunbo-highspeed.png')
        }, {
          imgUrl: require('@/assets/ym-media/lunbo-highspeed.png')
        }],
        banner:[],
        list1:[],
        list2:[],
        list3:[],
        list4:[],
        list5:[],
        list6:[],
        list7:[],
        list8:[],
        list9:[],
        shos: 0,
        shon: 0,
        shom: 0,
        shob: 0,
        shov: 0,
        shoc: 0,
        shox: 0,
        shoz: 0,
        shoa: 0,
        shod: 0,
      }
    },
    mounted(){
		this.getList(24,3);//高速轮播
		this.getList(25,8);//高速首都放射线
		this.getList(26,8);//高速南北纵横线
		this.getList(27,8);//东西横向线
		this.getList(28,8);//地区环线
		this.getList(29,8);//城市环线
		this.getList(30,1);//banner
		this.getList(31,4);//热门媒体
		this.getList(32,2);//媒体推荐-图片
		this.getList(33,8);//媒体推荐-文字链
		this.getList(34,10);//户外广告公司推荐
		
	},
	methods:{
		getList:function(adid ,limit){
	  		this.$http({
					url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+"&limit="+limit,
					method: 'JSONP',
				    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					jsonp: 'callbackparam'
				}).then(res => {
					/*console.log(res.data);*/
					if(res.data != null){
						if(adid == 24){this.banners = res.data;}
						if(adid == 25){this.list1 = res.data;}
						if(adid == 26){this.list2 = res.data;}
						if(adid == 27){this.list3 = res.data;}
						if(adid == 28){this.list4 = res.data;}
						if(adid == 29){this.list5 = res.data;}
						if(adid == 30){this.banner = res.data;}
						if(adid == 31){this.list6 = res.data;}
						if(adid == 32){this.list7 = res.data;}
						if(adid == 33){this.list8 = res.data;}
						if(adid == 34){this.list9 = res.data;}
					}
				}).catch()
		}
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-media {
    width: 100%;
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      position: absolute;
      top: 234px;
      left: 0;
      z-index: 1;
    }
    .yingmoo-picture {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      img {
        width: 100%;
      }
    }
    .model-heighspeed {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .model-left {
        width: 956px;
        .yingmoo-leftcolumn {
          width: 956px;
          margin-top: 30px;
          .column-navbar {
            height: 44px;
            line-height: 44px;
            margin-bottom: 25px;
            position: relative;
            &.grey {
              background-color: #e6e6e6;
            }
            .column-title {
              position: absolute;
              left: 0;
              top: 0;
              z-index: 1;
              width: 247px;
              color: #fbb03b;
              font-size: 18px;
              background-color: #036eb7;
              .column-icon {
                margin-left: 26px;
              }
              .column-arrow {
                position: absolute;
                right: -26px;
                top: 0;
              }
            }
            .column-citys {
              line-height: 44px;
              width: 60px;
              background: none;
              color: #999999;
              float: right;
            }
          }
          .column-content {
            width: 956px;
            height: 100%;
            background-color: transparent;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            .media-model {
              width: 222px;
              height: 265px;
              position: relative;
              dd {
                background-color: white;
                height: 24px;
                line-height: 24px;
                text-align: center;
              }
              .zz {
                position: absolute;
                top: 0;
                .black {
                  width: 222px;
                  height: 120px;
                  background-color: rgba(0, 0, 0, 0.6);
                  border-bottom: 1px solid white;
                  padding-top: 10px;
                  text-align: center;
                  .white {
                    width: 150px;
                    height: 65px;
                    margin: 0 auto;
                    border: 1px solid white;
                    padding: 5px 7px;
                    .orange {
                      height: 65px;
                      background-color: rgba(236, 165, 36, 0.7);
                      text-align: center;
                      p:nth-child(1) {
                        margin: 0 auto; 
                        padding-top: 5px;
                        font-size: 12px;
                        line-height: 16px;
                        width: 144px;
                        height: 32px;
                      }
                      p:nth-child(2) {
                        font-size: 16px;
                        font-weight: bold;
                        text-align: center;
                      }
                      p {
                        color: white;
                      }
                    }
                  }
                  p {
                    line-height: 32px;
                    font-size: 20px;
                    font-weight: bold;
                    color: white;
                  }
                }
              }
              .media-text-first {
                font-size: 15px;
                padding-top: 9px;
                overflow: hidden;
                text-overflow : clip;
              }
              .media-text-secend {
                font-size: 12px;
                color: red;
                padding-bottom: 7px;
              }
            }
          }
        }
      }
      .model-right {
        width: 222px;
        .hot-media {
          margin-top: 30px;
          p {
            font-size: 20px;
            border-bottom: 3px solid #036eb7;
            line-height: 41px;
            color: #036eb7;
            font-weight: bold;
          }
        }
        .hot-medias {
          margin-top: 15px;
          p {
            font-size: 20px;
            border-bottom: 3px solid #036eb7;
            line-height: 41px;
            color: #036eb7;
            font-weight: bold;
          }
        }
        .media-right {
          width: 222px;
          height: 290px;
          margin-top: 19px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-first {
            font-size: 16px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow : clip;
          }
          .media-secend {
            font-size: 14px;
            color: red;
          }
          .media-where {
            font-size: 14px;
            color: #999999;
            padding-bottom: 6px;
          }
        }
        .model-right-text {
          width: 222px;
          margin-top: 10px;
          margin-bottom: 30px;
          p {
            height: 30px;
            font-size: 16px;
            color: #333333;
            line-height: 30px;
            text-align: center;
            overflow: hidden;
            text-overflow: clip;
          }
          .text-header {
            margin-top: 20px;
            height: 30px;
            overflow: hidden;
            text-overflow: clip;
          }
        }
      }

    }

  }

</style>
